<template>
  <div class="login">
    <div class="screen">
      <van-nav-bar left-arrow @click-left="onClickLeft" />
      <div class="classroom">
        <div class="Netease-Cloud">
          <van-icon name="smile" color="green" />网易云课堂
        </div>
        <p>顶尖互联网教育平台</p>
        <button class="register" @click="register">注册</button>
        <button class="number-login" @click="number">手机号登录</button>
      </div>
      <fieldset class="qita">
        <legend>其他登录</legend>
        <div class="div-1">
          易
          <p>网易</p>
        </div>
        <div class="div-1">
          QQ
          <p>QQ</p>
        </div>
        <div class="div-1">
          微信
          <p>微信</p>
        </div>
        <div class="div-1">
          微博
          <p>微博</p>
        </div>
        <div class="div-1">
          人人
          <p>人人</p>
        </div>
      </fieldset>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onClickLeft() {
      this.$router.go(-1);
      this.$store.commit("tabShow");
    },
    number() {
      this.$router.push({
        name: "Number",
      });
    },
    register(){
       this.$router.push({
        name: "Register",
      });
    }
  },
  created() {
    this.$store.commit("tabHide");
  },
};
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/image/215.png");
  background-repeat: no-repeat;
  background-size: cover;

  .screen {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);

    .classroom {
      width: 281px;
      height: 231px;
      margin: 80px auto;
      position: relative;
      .Netease-Cloud {
        width: 177px;
        height: 56px;
        text-align: center;
        line-height: 56px;
        margin: 10px auto;
        color: rgba(80, 80, 80, 1);
        font-size: 23px;
      }
      p {
        text-align: center;
        color: rgba(80, 80, 80, 1);
        font-size: 15px;
        letter-spacing: 4px;
      }
      .register {
        width: 100%;
        height: 40px;
        background-color: white;
        text-align: center;
        line-height: 40px;
        position: absolute;
        bottom: 0;
        color: rgba(51, 177, 123, 1);
        font-size: 15px;
        border: 0;
      }
      .number-login {
        width: 100%;
        height: 40px;
        background-color: rgba(51, 177, 123, 1);
        text-align: center;
        line-height: 40px;
        position: absolute;
        bottom: 50px;
        color: #fff;
        font-size: 15px;
        border: 0;
      }
    }

    .qita {
      width: 306px;
      height: 122px;
      text-align: center;
      border: 0;
      border-top: 1px solid rgba(166, 166, 166, 1);
      color: rgba(166, 166, 166, 1);
      margin: 100px auto;
      display: flex;
      justify-content: space-between;
      .div-1 {
        width: 47px;
        height: 47px;
        border: 1px solid rgba(153, 164, 189, 1);
        border-radius: 50%;
        line-height: 45px;
        margin-top: 20px;
        font-size: 13px;
        color: rgba(80, 80, 80, 1);
      }
    }
  }
}
</style>